<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    align="left"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="99%">
    <el-form ref="form" :model="form" label-width="60px" :rules="rules" v-if="detail.id>0">
      <el-form-item label="状态" align="left" prop="status">
        <el-select v-model="form.isAgree" placeholder="状态">
          <el-option
            v-for="(item,index) in isAgreeArr"
            :key="index"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="取消原因" align="left" prop="reason" v-if="form.isAgree===0">
        <el-input v-model="form.reason" style="width: 90%"></el-input>
      </el-form-item>
      <el-form-item label="地址" align="left" prop="addressId" v-if="form.isAgree===1 && detail.type.id!==2">
        <div class="address-box">
          <address-item :address-data="address" :show-type="0" :call-back="resetAddress"/>
          <div class="bottom-bar"></div>
        </div>

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import AddressItem from './AddressItem'

export default {
  name: 'OrderApplyHandlerDialog',
  components: {AddressItem},
  data: function () {
    return {
      info: '退换货-处理',
      callback: null,
      dialogVisible: false,
      currLoading: false,
      address: {},
      isAgreeArr: [
        {id: 1, name: '同意请求'},
        {id: 0, name: '拒绝请求'}
      ],
      detail: {},
      form: {
        id: 0,
        isAgree: 1,
        reason: '',
        addressId: 0
      },
      rules: {
        reason: [
          {required: false, message: '请输入 名称', trigger: ['blur', 'change']},
          {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: ['blur', 'change']}
        ]
      }
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('OrderApplyHandlerDialogCallBus', function (detail, callback) {
      $this.open(detail)
      $this.callback = callback
    })
  },
  watch:{
    $route:function () {
      this.dialogVisible=false
    }
  },
  methods: {
    // 打开弹窗
    open: function (detail) {
      this.detail = detail
      this.form.id = detail.id
      this.form.isAgree = 1
      this.form.reason = ''
      this.getAddress()
    },
    // 返回重新设置的一直
    resetAddress:function (address) {
      this.address=address
      this.form.addressId=address.id
      this.$forceUpdate()
    },
    submit: function () {
      let $this = this
      if ($this.form.type === 0 && (!$this.form.reason || $this.form.reason.length < 5)) {
        return this.$message.error('拒绝理由 不能为空')
      }
      $this.$refs.form.validate((valid) => {
        if (valid) {
          var form = {
            id: $this.form.id,
            isAgree: $this.form.isAgree,
            reason: $this.form.reason,
            addressId: $this.form.addressId,
          }
          $this.currLoading = true
          $this.MyRequest(this.ApiDoNameShop + 'OrderApply/handlerApply', form, function () {
            $this.$message.success('操作成功')
            $this.currLoading = false
            $this.dialogVisible = false
            $this.callback()
            $this.$forceUpdate()
          }, function () {
            $this.$message.success('操作失败，请重试')
            $this.currLoading = false
            $this.$forceUpdate()
          })
        } else {
          return false
        }
      })
    },
    getAddress: function () {
      let $this = this
      $this.MyRequest(this.ApiDoNameShop + 'ShopAddress/getDetail', {id:0}, function (data) {
        if (data && data.id>0){
          $this.address = data
          $this.form.addressId=$this.address.id
        }
        $this.dialogVisible = true
        $this.$forceUpdate()
      }, function () {
        $this.$message.success('操作失败，请重试')
        $this.currLoading = false
        $this.$forceUpdate()
      })
    }
  },

}
</script>

<style scoped>

</style>
